<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>C.R.Y.P.T</title>
    <link type="text/css" href="/static/css/ui-darkness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	

    <!-- LAYOUT STYLING -->
    <style type="text/css">
    html, body {
        background:	#666;
        width:		100%;
        height:		100%;
        padding:	0;
        margin:		0;
        overflow:	auto; /* when page gets too small */
    }
    #layout {
        background:	#999;
        height:		100%;
        margin:		0 auto;
        width:		100%;
        __max-width:	900px;
        min-width:	700px;
        _width:		700px; /* min-width for IE6 */
    }
    .pane {
        display:	none; /* will appear when layout inits */
    }
    .ui-layout-pane-south {
        overflow: visible !important;
    }
    </style>

    <script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-ui-1.8.6.custom.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="/static/js/jquery.layout-1.2.0.js"></script>
    <script type="text/javascript" src='/static/js/jquery.jstree.js'></script>

    <script type="text/javascript" charset="utf-8">

    // Tree Action Handler
    var on_tree_action = function (actionName, n) {
        data = { action : actionName, model : n.attr("model"), pk : n.attr("pk") };
        $.getJSON(
            "/the_crypt/tree_action", data, function(data) {
                console.log("Result of tree action:", data);
                $('#'+data.iframe).attr('src', data.url );
            }
        );
        return true;
    };

    $(function () {
        $("#layout").layout(
            {
            applyDefaultStyles: true,
/*            west__onresize: function () {
                    $('#center').accordion('resize')
                }*/
            //east__maskIframesOnResize: ".ui-layout-pane #center"
            //maskIframesOnResize: true
            }
        );

        $("#leftSections").accordion({fillSpace: true, header: "h5"});
        $('.leftLink').bind('click', function() {
            $('#center').attr('src', $(this).attr('href') );
            return false;
        });
        
        $("#tree").jstree({
            plugins : [ "json_data", "ui", "themeroller", "contextmenu" ],
            core : {
                "animation" : "fast",
            },
            "json_data" : {
                "correct_state": true,
                "data" : [
                    {
                        "attr" : {"model": "Projects"},
                        "data" : "Projects", 
                        "state" : "closed"
                    }
                ],
                "ajax" : {
                    "url" : "/the_crypt/tree_open" ,
                    "data" : function (n) { 
                        return { model : n.attr("model"), pk : n.attr("pk") }; 
                    }
                },
            },
            "contextmenu" : {
                "show_at_node" : false,
                "select_node" : true,
                "items" : function(n) {
                    var items = {};
                    $.ajax({
                        url: "/the_crypt/tree_menu",
                        async: false,
                        dataType: 'json',
                        success: function(data) {
                            for (action in data)
                            {
                                actionCode = data[action]["action"];
                                eval( "data[\""+action+"\"][\"action\"] = function(n){"+actionCode+"};" );
                            }
                            items = data;
                        }
                    });
                    return items;
                },
                "items_" : {
                    // Some key
                    "rename" : {
                        // The item label
                        "label"				: "test action",
                        // The function to execute upon a click
                        "action"			: on_tree_action,
                        // All below are optional 
                        "_disabled"			: false,        // clicking the item do anything?
                        "_class"			: "toto",	// class is applied to the item LI node
                        "separator_before"	: false,	// Insert a separator before the item
                        "separator_after"	: true,		// Insert a separator after the item
                        // false or string - if does not contain `/` - used as classname
                        "icon"				: false,
                        //"submenu"			: { 
                        //    /* Collection of objects (the same structure) */
                        //}
                    }
                }
            }
        });
    });

    </script>
</head>

<body>
<!--    <TABLE><TR HEIGHT=100%>
        <TD>
            <div id=tree></div>
        </TD>
        <TD WIDTH=100%>
            <iframe id=center width="100%" height="100%"
                scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
                <p>Your browser does not support iframes</p>
            </iframe>
        </TD>
    </TR></TABLE>-->

        <DIV id="layout">

            <DIV class="pane ui-layout-west">
                <div id=leftSections>
                    <div class="leftSection" id=projTree>
                        <h5><a href="#">Tree</a></h5>
                        <div id="tree"></div>
                    </div>
                    <div class="leftSection" id=userPages>
                        <h5><a href="#">My Pages</a></h5>
                        <div>Not Available</div>
                    </div>
                    <div class="leftSection" id=admin>
                        <h5><a href="#">Admin</a></h5>
                        <div>
                        <a class="leftLink" href="/admin/">Site</a><br>
                        <a class="leftLink" href="/admin/auth/user/">Users</a><br>
                        <a class="leftLink" href="/admin/the_crypt/">The C.R.Y.P.T.</a><br>
                        </div>
                    </div>
                </div>
            </DIV>

            <DIV class="pane ui-layout-north">
                {% if MGL %}
                <img
                    title="MGL - Logo" 
                    src="http://intranet/mgl/images/news.jpg"
                    alt="MGL - Logo" 
                    width="64" height="64"
                >
                <font color="#FF8B00">MGL</font>
                {% else %}
                <img
                    title="SupamonkS - Logo" 
                    src="http://medias.3dvf.com/publish/supamonks_lapins_cretins/logo_ARCUEIL_SEUL.PNG"
                    alt="SupamonkS - Logo" 
                    width="64" height="64"
                >
                <font color="#9F2427">SPMKS</font>
                {% endif %}
            </DIV>

            <DIV class="pane ui-layout-south">
                South
            </DIV>

            <DIV class="pane ui-layout-east">
            </DIV>

            <!-- <DIV class="pane ui-layout-center"> -->
                <iframe src="welcome" id="center" class="pane ui-layout-center"
                    width="100%" height="100%"
                    scrolling="yes" marginheight="0" marginwidth="0" frameborder="0">
                  <p>Your browser does not support iframes</p>
                </iframe>
            <!-- </DIV> -->

        </DIV>

</body>
</html>
